<template>
  <div class="article-box">
    <h1 class="article-title">{{articleTitle}}</h1>
    <article-sub :subInfo="articleInfo.subInfo"></article-sub>
    <div v-html="articleContent" class="article-content" ref="articleContent"></div>
    <article-tag :tagInfo="articleInfo.tagInfo"></article-tag>
  </div>
</template>

<style lang="less">
  @import './articleBox.less';
</style>

<script>
  import reqwest from 'reqwest'
  import unescape from 'lodash/unescape'

  import ArticleSub from './articleSub.vue'
  import ArticleTag from './articleTag.vue'
  import TtAudio from '../../audio'

  export default {
    name: 'ArticleBox',
    props: {
      articleInfo: Object
    },
    data () {
      return {
        articleTitle: this.articleInfo.title,
        articleContent: ''
      }
    },
    mounted () {
      this.articleContent = unescape(this.articleInfo.content)
      this.$nextTick(() => {
        let $content = this.$refs.articleContent
        // 头条号卡片
        this._pgcCardHandle()
        // 音频
        this._audioHandle($content.querySelectorAll('tt-audio'))
      })
    },
    methods: {
      _audioHandle (els) {
        if (els && els.length) {
          for (let i = 0, len = els.length; i < len; i++) {
            let el = els[i]
            TtAudio(el, {
              id: el.getAttribute('data-id'),
              title: el.getAttribute('title'),
              time: el.getAttribute('time'),
              content: el.getAttribute('content')
            })
          }
        }
      },
      _pgcCardHandle () {
        this._executeScript(this.articleContent)
      },
      _executeScript (content) {
        let re = /<script>([\s\S]*)<\/script>/gm
        let match
        while ((match = re.exec(content))) {
          var script = document.createElement('script')
          script.type = 'text/javascript'
          script.innerHTML = match[1]
          document.body.appendChild(script)
        }
      },
      _getArticleContent () { // 防爬预留
        let param = {}
        if (this.articleInfo.type === 2) {
          param['item_id'] = this.articleInfo.itemId
        } else {
          param['group_id'] = this.articleInfo.groupId
        }
        reqwest({
          url: '/api/pc/detail/',
          method: 'get',
          data: param,
          success: (res) => {
            if (res.message === 'success') {
              let data = res.data
              this.articleContent = data.content || ''
            }
          }
        })
      }
    },
    components: {
      ArticleSub,
      ArticleTag,
      TtAudio
    }
  }
</script>



// WEBPACK FOOTER //
// articleBox.vue?53d5a438
